<template>
	<div class="toList2">
		
<div class="ju">

<div class="hua" v-for="(item,index) in arr" :key="index">
	<div class="top">
		<span>{{item.span1}}</span>
		<span>{{item.span2}} </span>
	</div>
	<div class="bottom">
		<div class="left">
			<img :src="item.img1" alt="">
		</div>
		<div class="right">
			<img :src="item.img2" alt="">
		</div>
	</div>
</div>
</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			arr: [
				// { span1: "聚划算", span2: "品牌折扣", img1: "//gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp", img2:"//gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp"},
				// { span1: "天天特卖", span2: "1元秒杀", img1: "//gw.alicdn.com/tps/O1CN01yeTT0Q1sEDo3YYSFB_!!6000000005734-0-yinhe.jpg_140x140q90.jpg_.webp", img2:"//gw.alicdn.com/tps/O1CN01axSNVz1LUorQBHYgo_!!6000000001303-0-yinhe.jpg_180x180q90.jpg_.webp"},
				// { span1: "有好货", span2: "好口碑", img1: "//gw.alicdn.com/tps/O1CN01kKFInE1SaV3a9Sl0s_!!6000000002263-0-yinhe.jpg_140x140q90.jpg_.webp", img2:"//gw.alicdn.com/tps/O1CN013vqOzt1QtcIyYBVQw_!!6000000002034-0-yinhe.jpg_180x180q90.jpg_.webp"},
				// { span1: "每日好店", span2: "头条", img1: "//gw.alicdn.com/tps/O1CN01qJRTAE25TsM4lej8O_!!6000000007528-0-yinhe.jpg_140x140q90.jpg_.webp", img2:"//gw.alicdn.com/tps/TB1djKkeYsrBKNjSZFpSuwXhFXa.jpg_180x180q90.jpg_.webp"},
				]
		}
	},
	async created() {
		this.$http({
			url: ' http://localhost:3000/sylist',
			method: "get"
		}).then(res => {
			this.arr = res.data

		})
	}
}
</script>

<style scoped>
.toList2{
	height: 3.68rem;
	padding-left: .2rem;
	box-sizing: border-box;
	background-color: #f4f4f4;
}
.ju{
	width: 7.1rem;
	height: 3.68rem;
	border-radius: .3rem;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: white;
}
.hua{
	width: 3.45rem;
	height: 1.84rem;
	border-bottom: 1px solid rgba(227, 225, 225, 0.512);
	border-left: 1px solid rgba(227, 225, 225, 0.692);
}

.top :nth-child(1){
	font-size: 14px;
	margin-left: 8px;
}
.top :nth-child(2){box-sizing: border-box;
padding: 0 4px 0 3px ;
	background-color: red;
	color: white;
	font-size: 12px;
	margin-left: 5px;

}
.bottom {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.left{
	width: 1.26rem;
	height: 1.26rem;
	margin-left: 12px;
	margin-top: 5px;
}
.left img{
	width: 100%;
}
.right img{
	width: 100%;
}
.right{
	width: 1.4rem;
	height: 1.6rem;
	margin-right: 10px;
}
</style>